<!--
* @author wn
* @date 2022/04/28 15:23:12
* @description: 新鲜好物
!-->
<template>
	<div class="home-new" ref="target">
		<home-panel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
			<template #right>
				<xtx-more path="/" />
			</template>
			<!-- 默认插槽 -->
			<transition name="fade">
				<ul class="goods-list" v-if="goods.length">
					<li v-for="good in goods" :key="good.id">
						<router-link :to="`/product/${good.id}`">
							<img v-lazy="good.picture" alt="" />
							<p class="name ellipsis">{{ good.name }}</p>
							<p class="price">&yen;{{ good.price }}</p>
						</router-link>
					</li>
				</ul>
				<!-- 骨架屏 -->
				<home-skeleton v-else bg="#f0f9f4" />
			</transition>
		</home-panel>
	</div>
</template>
<script>
// import { ref } from 'vue'
import { findNew } from '@/network/home'
import HomePanel from './HomePanel'
import HomeSkeleton from './HomeSkeleton'
import { useLazyData } from '@/hooks'

export default {
	name: 'HomeNew',
	components: {
		HomePanel,
		HomeSkeleton,
	},
	setup() {
		/* 		const goods = ref([])
		// 获取新鲜好物数据
		findNew().then(v => (goods.value = v.result)) */
		// 获取新鲜好物数据 byLazy
		const { target, result } = useLazyData(findNew)
		return { target, goods: result }
	},
}
</script>
<style scoped lang="less">
.goods-list {
	display: flex;
	justify-content: space-between;
	height: 406px;
	li {
		width: 306px;
		// height: 406px;
		background: #f0f9f4;
		.hoverShadow();
		img {
			width: 306px;
			height: 306px;
		}
		p {
			font-size: 22px;
			padding: 12px 30px 0 30px;
			text-align: center;
		}
		.price {
			color: @priceColor;
		}
	}
}
</style>
